<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>HOME</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/qpad.css" />
		<style type="text/css">
			body {
				background-color: #fff;
			}
			.swiper-container {
				width: 100%;
				height: auto;
			}
			.swiper-wrapper {
				min-height: 505px;
				height: auto;
			}
			.swiper-slide {
				/*position: 0px;*/
				
				top: 0px;
				font-size: 18px;
				background: #fff;
			}
			.item .count {
				font-size: 14px;
			}
			.hastest {
				font-size: 16px;
			}
			.mui-table-view-cell.mui-active {
				background-color: #fff;
			}
			.title {
				padding: 20px 0px;
				color: #1e1d25;
			}
			.mui-btn-primary {
				background-color: #4fd2c2;
				border-color: #4fd2c2;
			}
			.selectitems h5 {
				text-align: left;
			}
			.selectitems h4 {
				line-height: 35px;
				font-weight: 200;
				text-align: left;
			}
			.selectitem {
				display: inline-block;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				/*border: 1px solid #32A4ED;*/
				
				color: #32a4ed;
				font-weight: bold;
			}
			.selectitem~.selected {
				border-radius: 15px;
				border: 1px solid #3E9FEC;
			}
			.selected {
				border-radius: 15px;
				border: 1px solid #3E9FEC;
			}
			.answeritem {
				margin-left: 15px;
				color: #959597;
			}
			.jiexi {
				padding: 10px 5px;
				background-color: #FFF;
				text-align: left;
			}
			.jiexi-title {
				height: 35px;
				padding: 5px 0px;
			}
			.jiexi-title img {
				height: 25px;
				float: left;
			}
			.jiexi p {
				line-height: 24px;
				color: #4fd2c0;
				font-size: 16px;
				margin-top: 5px;
			}
			/*.jiexiArea {
				visibility: hidden;
			}*/
		</style>

	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
			</div>
		</div>

	</body>
	<script type="text/html" id="qitem">
		<ul class="mui-table-view">
			<input type="hidden" class="qid" value="{{id}}" />
			<li class="mui-table-view-cell" style="background-color: #f8f8fa;">
				<span class="mui-pull-left">
					<button class="mui-btn mui-btn-primary">
						{{if type=="single_choice"}}单选{{/if}}
						{{if type=="uncertain_choice"}}多选{{/if}}
						{{if type=="determine"}}判断{{/if}}
						{{if type=="material"}}材料题{{/if}}
					</button>
				</span>
				<span class="mui-pull-left  mui-ellipsis" style="margin-left: 20px;line-height: 33px;width: 50%;font-size: 15px;">
					{{pageParam("testTitle")}}
				</span>
				<span class="mui-pull-right" style="margin-right: 10px;line-height: 33px;font-size: 15px;"><span style="color: #2fa4ea;">{{pageParam("pageno")}}</span>/{{pageParam("totalpage")}}</span>
			</li>
			<li class="mui-table-view-cell selectitems" id="{{id}}" data-type="{{type}}">
				<h5 style="font-size: 18px;line-height: 24px;">{{#loadImage(stem)}}</h5> {{if type == "determine"}}
				<h4 class="choiceitem" data-type="{{type}}">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == 1}} onrightitem selected{{else}} rightitem{{/if}}{{/each}}{{else}} rightitem{{/if}}">	
								</span>
								<span class="answeritem">
									正确
								</span>						
				</h4>
				<div class="clearfix">

				</div>
				<h4 class="choiceitem" data-type="{{type}}">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == 0}} onwrongitem selected{{else}} wrongitem{{/if}}{{/each}}{{else}} wrongitem{{/if}}">	
								</span>
								<span class="answeritem">
									错误
								</span>						
				</h4> {{else if type == "material"}} {{else}} {{each $parse(metas).choices as value i}}
				<h4 class="choiceitem" data-type="{{type}}">
								<span class="selectitem">
									{{if i==0}}A{{/if}}
									{{if i==1}}B{{/if}}
									{{if i==2}}C{{/if}}
									{{if i==3}}D{{/if}}
									{{if i==4}}E{{/if}}
									{{if i==5}}F{{/if}}
								</span>
								<span class="answeritem">
									{{#value}}
								</span>						
					</h4> {{/each}} {{/if}}
			</li>

			{{if sub}} {{each sub as vv}} {{if vv}}
			<li class="mui-table-view-cell selectitems" id="{{vv.id}}" data-type="{{vv.type}}">
				<h5 style="font-size: 18px;line-height: 24px;">({{if vv.type=="single_choice"}}单选{{/if}}{{if vv.type=="uncertain_choice"}}多选{{/if}}{{if vv.type=="determine"}}判断{{/if}})&nbsp;{{#vv.stem}}</h5> {{if vv.type == "determine"}}
				<h4 class="choiceitem" data-type="{{vv.type}}">
								<span class="selectitem rightitem">	
								</span>
								<span class="answeritem">
									正确
								</span>						
				</h4>
				<div class="clearfix">

				</div>
				<h4 class="choiceitem" data-type="{{vv.type}}">
								<span class="selectitem wrongitem">	
								</span>
								<span class="answeritem">
									错误
								</span>						
				</h4> {{else}} {{each $parse(vv.metas).choices as value i}}
				<h4 class="choiceitem" data-type="{{vv.type}}">
									<span class="selectitem">
										{{if i==0}}A{{/if}}
										{{if i==1}}B{{/if}}
										{{if i==2}}C{{/if}}
										{{if i==3}}D{{/if}}
										{{if i==4}}E{{/if}}
										{{if i==5}}F{{/if}}
									</span>
									<span class="answeritem">
										{{#value}}
									</span>						
						</h4> {{/each}} {{/if}}
			</li>
			{{/if}} {{/each}} {{/if}}

			<li class="mui-table-view-cell" style="padding: 15px;">
				<div style="background-color: #f8f8fa;padding: 10px 10px;">
					<h4 class="jiexi-title"><img src="../image/xiangjie.png" style="height: 25px;"/></h4>
					<div class="jiexi">
						{{if type!="material"}}

						<p>你的答案:{{each $toArray(myans)}} 
							{{if type=="determine"}}
								{{if $value}}
									{{if $value==0}}错误{{/if}} {{if $value==1}}正确{{/if}}
								{{else}}
								未作答 
								{{/if}} 
							{{else}}
								{{if $value}} {{if $value==0}}A{{/if}} {{if $value==1}}B{{/if}} {{if $value==2}}C{{/if}} {{if $value==3}}D{{/if}} {{if $value==4}}E{{/if}} {{if $value==5}}F{{/if}} &nbsp; {{else}}未作答 {{/if}} 
							{{/if}}
							{{/each}}
						</p>
						<p>
							正确答案:{{each $toArray(answer)}}
							{{if type=="determine"}}
								{{if $value==0}}错误{{/if}} {{if $value==1}}正确{{/if}} 
							{{else}}
								{{if $value==0}}A{{/if}} {{if $value==1}}B{{/if}} {{if $value==2}}C{{/if}} {{if $value==3}}D{{/if}} {{if $value==4}}E{{/if}} {{if $value==5}}F{{/if}} &nbsp; 
							{{/if}}
							{{/each}}
						</p>

						{{/if}}

						<p>{{if analysis}}
							{{#loadImage(analysis)}}
							{{/if}}
						</p>
					</div>
				</div>
			</li>
		</ul>
	</script>
	<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/template/helper.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="../script/db.js" type="text/javascript" charset="utf-8"></script>-->
	<script type="text/javascript">
		MYPAGE = {};
		MYPAGE.pageno = 0;
		function renderQues(data) {
			//			data = data.data;
			var qindex = 0; //题目的编号索引
			var action = 0;
			var swiper = new Swiper('.swiper-container', {
				loop: true,
				onSlideChangeStart: function(swiper) {
						swiper.unlockSwipeToNext();
						var cindex = swiper.activeIndex;
						var thisheight = swiper.slides[cindex].offsetHeight + 'px';
						if (thisheight != "0px") {
							swiper.container[0].style.height = thisheight;
						}
						var oldindex = swiper.previousIndex;
						var nextindexEle = document.getElementsByClassName('swiper-slide-next')[0];
						if (typeof(nextindexEle) == "undefined") {
							nextindex = 2;
						} else {
							nextindex = parseInt(nextindexEle.getAttribute('data-swiper-slide-index')) + 1;
						}
						if (nextindex == 1) {
							nextindex = 11;
						}
						if (cindex > oldindex) {
							qindex++
						} else if (cindex < oldindex) {
							qindex--
						}
						MYPAGE.pageno = qindex + 1;
						if (MYPAGE.pageno < MYPAGE.questionNum || MYPAGE.pageno == MYPAGE.questionNum) {
							var html = template('qitem', data[qindex].question);
							swiper.slides[nextindex].innerHTML = html;
							if (nextindex == 11) {
								swiper.slides[1].innerHTML = html;
							}
							if (nextindex == 10) {
								swiper.slides[0].innerHTML = html;
							}
							if (qindex == 1) {
								swiper.lockSwipeToPrev();
								MYPAGE.pageno = 1;
								html = template('qitem', data[qindex - 1].question);
								swiper.slides[cindex].innerHTML = html;
							} else {
								swiper.unlockSwipeToPrev();
							}
							window.scrollTo(0, 0);
							api.sendEvent({
								name: 'slideChange',
								extra: {
									pageno: qindex,
									total: MYPAGE.questionNum
								}
							});
						} else {
							swiper.lockSwipeToNext();
							api.toast({
								msg: "没有题目了哦！"
							});
						}
					}
					//				onSlideChangeEnd: function(swiper){
					//					
					//				    }
			});
			api.addEventListener({
				name: 'slideNext'
			}, function(ret, err) {
				swiper.slideNext();
			});
			api.addEventListener({
				name: 'slidePrev'
			}, function(ret, err) {
				swiper.slidePrev();
			});
			//			api.addEventListener({
			//				name: 'showAnswer'
			//			}, function(ret, err) {
			//				swiper.slides[swiper.activeIndex].getElementsByClassName('jiexiArea')[0].style.visibility = "visible";
			//			});
			//			api.addEventListener({
			//				name: 'Answer'
			//			}, function(ret, err) {
			//				swiper.slides[swiper.activeIndex].getElementsByClassName('jiexiArea')[0].style.visibility = "hidden";
			//			});
			//			api.addEventListener({
			//				name: 'favor'
			//			}, function(ret, err) {
			//				var qid = swiper.slides[swiper.activeIndex].getElementsByClassName('qid')[0].value;
			//				api.toast({
			//					msg: "已收藏" + qid
			//				});
			//			});
		}
		apiready = function() {
			var data = api.pageParam;
			var url = MYAPP.webroot + "/api/index.php/Home/Index/getMyAnalysis/";
			showWaiting("稍等一下哦!");
			api.ajax({
				url: url,
				method: 'post',
				timeout: 30,
				dataType: 'json',
				data: {
					values: data
				},
				returnAll: false
			}, function(ret, err) {
				hideWaiting();
				if (ret.code = 200) {
					var data = ret.data;
					MYPAGE.questionNum = data.length;
					renderQues(data);
				} else {
					api.toast({
						msg: '错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode,
						location: 'middle',
						duration: 1000
					});
				}
			});
		}
	</script>

</html>